<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery/jquery1.9/jquery-1.9.0.js"></script>
    <script>
        function addNode(){
            // var li=$("<li>");
            // li.html("我叫杨晶晶");

            //创建节点
            var li=$("<li class='heihei'>杨晶晶</li>");
            //添加到元素的末尾（内部插入）
            // li.appendTo($("ul"));//子元素添加到父元素
            // $("ul").append(li);//父元素添加子元素

            //添加到元素的开头（内部插入）
            // li.prependTo($("ul"));//子元素添加到父元素
            $("ul").prepend(li);
            
            //创建节点
            var p=$("<p>我是p</p>");
            //在ul的后面添加同级别的p元素(外部插入)
            $("ul").after(p);

        }

        function doRemove(){
            $("ul li:first").remove();//删除节点
            // $("ul li:first").empty();//清空节点，不包含li标签自己的属性
        }
        function doClone(){
            $("li:eq(0)").click(function(){
                console.log("嘻嘻");
            });
            $("li:eq(0)").clone(true).appendTo($("ul"));//true表示的是克隆元素的所有事件
           
        }
        function doReplace(){
            //替换，这两个方法颠倒前后的顺序
            $("li:eq(0)").replaceWith($("<p>我是小蒋</p>"));
            // $("<li>我是蒋成浩</li>").replaceAll($("li:eq(0)"));
        }
    </script>
</head>
<body>
    <input type="button" value="添加" onclick="addNode()">
    <input type="button" value="删除" onclick="doRemove()">
    <input type="button" value="克隆" onclick="doClone()">
    <input type="button" value="替换" onclick="doReplace()">
    <ul>
        <li class="eat">吃饭</li>
        <li>睡觉</li>
        <li>打豆豆</li>
    </ul>
</body>
</html>